<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router_3.0.2.js"></script>
    <title>Document</title>
    <style type="text/css">
        html,
        body,
        #app {
          margin: 0;
          padding: 0px;
          height: 100%;
        }
        .header {
          height: 50px;
          background-color: #545c64;
          line-height: 50px;
          text-align: center;
          font-size: 24px;
          color: #fff;
        }
        .footer {
          height: 40px;
          line-height: 40px;
          background-color: #888;
          position: absolute;
          bottom: 0;
          width: 100%;
          text-align: center;
          color: #fff;
        }
        .main {
          display: flex;
          position: absolute;
          top: 50px;
          bottom: 40px;
          width: 100%;
        }
        .content {
          flex: 1;
          text-align: center;
          height: 100%;
        }
        .left {
          flex: 0 0 20%;
          background-color: #545c64;
        }
        .left a {
          color: white;
          text-decoration: none;
        }
        .right {
          margin: 5px;
        }
        .btns {
          width: 100%;
          height: 35px;
          line-height: 35px;
          background-color: #f5f5f5;
          text-align: left;
          padding-left: 10px;
          box-sizing: border-box;
        }
        button {
          height: 30px;
          background-color: #ecf5ff;
          border: 1px solid lightskyblue;
          font-size: 12px;
          padding: 0 20px;
        }
        .main-content {
          margin-top: 10px;
        }
        ul {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        ul li {
          height: 45px;
          line-height: 45px;
          background-color: #a0a0a0;
          color: #fff;
          cursor: pointer;
          border-bottom: 1px solid #fff;
        }
  
        table {
          width: 100%;
          border-collapse: collapse;
        }
  
        td,
        th {
          border: 1px solid #eee;
          line-height: 35px;
          font-size: 12px;
        }
  
        th {
          background-color: #ddd;
        }
      </style>
</head>
<body>
    <div id="app">
        <!-- 占位符 -->
        <router-view></router-view>
    </div>
</body>
<script>
// 四个组件
const App = {
    template: `
    <div>
      <!-- 头部区域 -->
      <header class="header">后台管理系统</header>
      <!-- 中间主体区域 -->
      <div class="main">
        <!-- 左侧菜单栏 -->
        <div class="content left">
          <ul>
            <li><router-link to="/users">用户管理</router-link></li>
            <li><router-link to="/rights">权限管理</router-link></li>
            <li><router-link to="/goods">商品管理</router-link></li>
            <li><router-link to="/orders">订单管理</router-link></li>
            <li><router-link to="/settings">系统设置</router-link></li>
          </ul>
        </div>
        <!-- 右侧内容区域 -->
        <div class="content right">
            <div class="main-content">
                <!-- 子路由占位符 -->
                <router-view />
            </div>
        </div>
      </div>
      <!-- 尾部区域 -->
      <footer class="footer">版权信息</footer>
    </div>
    `
}

var Users = {
    data(){
        return {
            //用户列表数据
            userlist: [
              { id: 1, name: '张三', age: 10 },
              { id: 2, name: '李四', age: 20 },
              { id: 3, name: '王五', age: 30 },
              { id: 4, name: '赵六', age: 40 }
            ]
        }
    },
    template:`<div>
        <h3>用户管理</h3>
        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in userlist" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td><a href="#" @click.prevent="showinfo(item.id)">详情</a></td>
            </tr>
        </table>
    </div>`,
    methods:{
        showinfo(id){
            this.$router.push('/userinfo/'+id)
        }
    }
}

var Rights = {
    template:`<div>
        <h1>权限管理</h1>
    </div>`
}

//用户详情
var UserInfo = {
    props:['id'],
    template:`<div>
        <h1>用户详情 -- {{id}}</h1>
        <button @click="goback">回退</button>
    </div>`,
    methods:{
        goback(){
            this.$router.go(-1)
        }
    }
}

//路由对象  配置
var  router = new VueRouter({
    routes:[
        {
            path: '/' ,
            component: App,
            children:[
                {path:'/users',component: Users },
                {path:'/rights',component: Rights },
                {path:'/userinfo/:id',component: UserInfo,props:true },
            ]
        }
    ]
});

var vm = new Vue({
    el: "#app",
    data:{
       
    },
    //路由挂载
    router
});
 

</script>
</html>